<template>
	<div class="personal">
		<el-image style="width: 100%; height: 250px" :src="require('../assets/1.jpg')" fit="cover"></el-image>
		<div class="el_tabs">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<div class="personal_top">
						<i class="el-icon-s-grid"></i>
						我的订单
					</div>
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane :label="title.label" :name="title.name" :key="index" v-for="(title,index) in list">
						</el-tab-pane>
					</el-tabs>
					<el-card class="box-card" v-for="(item ,index) in tableData" shadow="always">
						<div slot="header" class="clearfix">
							<span class="orderNo">订单编号：{{item.orderNo}}</span>
							<el-button class="bottom" type="text" v-if="item.status == 0">待付款</el-button>
							<el-button class="bottom" type="text" v-if="item.status == 1">待发货</el-button>
							<el-button class="bottom" type="text" v-if="item.status == 2">已完成</el-button>
							<el-button class="bottom" type="text" v-if="item.status == 3">已取消</el-button>
							<el-button class="bottom" type="text" v-if="item.status == 4">待收货</el-button>
						</div>
						<div class="text item" style="padding-bottom: 30px;">
							<div class="flex">
								<el-image :src="item.saleUrl" style="width: 100px;height: 100px;flex-shrink: 0;"
									fit="cover">
								</el-image>
								<div class="flex_sb">
									<div class="">{{item.saleName}}</div>
									<div class="flex_right">
										<div class="">数量：{{item.num}}</div>
										<div class="">价格：￥{{item.total}}</div>
									</div>
								</div>
							</div>
							<div style="margin-top: 30px;">
								<el-button class="bottom" type="text" @click="dialogs(item.id)" v-if="item.status == 0">
									支付
								</el-button>
								<el-button class="bottom" type="text" @click="cancel(item.id)" v-if="item.status == 0">
									取消订单
								</el-button>
								<el-button class="bottom" type="text" @click="finish(item.id)" v-if="item.status == 4">
									确认完成
								</el-button>
							</div>
						</div>
					</el-card>
					<div class="pagination">
						<el-pagination background @current-change="handleCurrentChange" :current-page.sync="pageNo"
							layout="total, prev, pager, next" :total="total" :page-size="pageSize">
						</el-pagination>
					</div>
				</el-col>

				<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
					<div class="personal_top">
						<i class="el-icon-s-grid"></i>
						我的资助
					</div>
					<el-row v-for="(item,index) in tableData1" :key="index" class="teach_item"
						@click.native="bindteach(item.id)" v-if="item.userMoney > 0">
						<el-col :span="6">
							<el-image style="width: 100%; height:140px" :src="item.url" fit="cover"></el-image>
						</el-col>
						<el-col :span="14" :offset="2">
							<div class="item_center">
								<div class="center_title">{{item.name}}</div>
								<div class="center_info1">
									<div style="margin: 10px 0;">目标金额：￥{{item.money}}元</div>
									<el-progress :text-inside="true" :stroke-width="20" :percentage="item.compile"
										status="exception">
									</el-progress>
									<el-row style="margin: 20px 0;">
										<el-col :span="12">持金额：￥{{item.userMoney}}元</el-col>
										<el-col :span="12">支持次数：{{item.userSupport}}次</el-col>
									</el-row>
								</div>
							</div>
						</el-col>
					</el-row>
					<div class="pagination">
						<el-pagination background @current-change="handleCurrentChange1" :current-page.sync="pageNo1"
							layout="total, prev, pager, next" :total="total1" :page-size="pageSize1">
						</el-pagination>
					</div>

				</el-col>
			</el-row>

		</div>
		<el-backtop></el-backtop>

		<el-dialog title="支付密码" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
			<el-form>
				<el-form-item label="支付密码" label-width="120px">
					<el-input v-model="name" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogclose">取 消</el-button>
				<el-button type="primary" @click="dialog">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				dialogFormVisible: false,
				name: '',
				activeName: '-1',
				list: [{
					label: '全部',
					name: '-1'
				}, {
					label: '待付款',
					name: '0'
				}, {
					label: '待收货',
					name: '4'
				}, {
					label: '已完成',
					name: '2'
				}],
				userId: '',
				total: 10,
				pageNo: 1,
				pageSize: 3,
				tableData: [],
				total1: 10,
				pageNo1: 1,
				pageSize1: 3,
				tableData1: []
			};
		},
		created() {
			this.orderlist()
			this.orderlist1();
		},
		// 事件方法执行
		methods: {
			orderlist() {
				this.$http.postRequest('main/order/show/list', {
					userId: sessionStorage.getItem('bfid'),
					status: this.activeName,
					pNum: this.pageNo,
					pSize: this.pageSize
				}).then((res) => {
					console.log(res.data);
					if (res.code === 0) {
						this.tableData = res.data
						this.total = res.totalSize
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			handleClick(tab, event) {
				this.pageNo = 1
				this.orderlist()
			},
			handleCurrentChange(pageNo) {
				this.pageNo = pageNo
				this.orderlist();
			},
			handleCurrentChange1(pageNo) {
				this.pageNo1 = pageNo
				this.orderlist();
			},
			orderlist1() {
				this.$http.postRequest('main/support/show/list', {
					userId: sessionStorage.getItem('bfid'),
					pNum: this.pageNo1,
					pSize: this.pageSize1
				}).then((res) => {
					if (res.code === 0) {
						console.log(JSON.stringify(res.data));
						this.tableData1 = res.data
						this.total1 = res.totalSize
					}
				}).catch((error) => {
					console.log(error)
				})
			},

			//取消订单
			cancel(event) {
				this.$confirm('您确定要取消订单吗？', '温馨提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.postRequest('main/order/cancel', {
						id: event,
					}).then((res) => {
						if (res.code === 0) {
							this.pageNo = 1
							this.orderlist()
						}
					}).catch((error) => {
						console.log(error)
					})
				}).catch(() => {});
			},

			//确认完成
			finish(event) {
				this.$confirm('您确定要确认完成订单吗？', '温馨提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.postRequest('main/order/finish', {
						id: event,
					}).then((res) => {
						if (res.code === 0) {
							this.pageNo = 1
							this.orderlist()
						}
					}).catch((error) => {
						console.log(error)
					})
				}).catch(() => {});
			},

			//支付
			dialogclose() {
				this.name = ''
				this.dialogFormVisible = false
			},
			dialogs(event) {
				this.id = event
				this.dialogFormVisible = true
			},
			dialog() {
				this.$http.postRequest('main/order/pay', {
					userId: sessionStorage.getItem('bfid'),
					id: this.id,
					payPass: this.name
				}).then((res) => {
					if (res.code === 0) {
						this.$message.success('支付成功');
						this.name = ''
						this.dialogFormVisible = false
						this.pageNo = 1
						this.orderlist()
					}
				}).catch((error) => {
					console.log(error)
				})
			},
		},
		// html加载完成后执行。
		mounted() {},
	}
</script>

<style scoped>
	.personal {
		min-height: 80vh;
		width: 80%;
		margin: auto;
		padding-bottom: 30px;
	}

	.personal_top {
		border: 1px solid #e4eaee;
		background-color: #f5f8fa;
		padding: 12px 30px;
	}

	.el_tabs {
		margin-top: 20px;
	}

	.box-card {
		margin-bottom: 30px;
	}

	.orderNo {
		font-size: 15px
	}

	.bottom {
		float: right;
		padding: 3px;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex_sb {
		width: 100%;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 30px;
	}

	.flex_right {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.teach_item {
		margin-top: 13px;
		padding-left: 20px;
		padding-top: 23px;
		padding-bottom: 26px;
		border: 1px solid #EEEEEE;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
		cursor: pointer;
	}
	
	.center_title {
		font-size: 16px;
		font-weight: bold;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.center_info {
		font-size: 14px;
		font-weight: 400;
		color: #535353;
		margin-top: 10px;
		line-height: 1.5;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		/*! autoprefixer: off */
		-webkit-box-orient:vertical;
		/* autoprefixer: on */
		-webkit-line-clamp:2;
	}
	
	.center_info1 {
		margin: 10px 40px 20px 0;
	}
</style>
